<template>
  <view class="map-container">
    <map id="container" :longitude="longitude" :latitude="latitude" :scale="scale" layer-style="1" :markers="markers" class="container"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 37.147184,
      longitude:106.283259,
      scale: 16,
      markers: [],
      map: null, // 将map作为组件数据
      provinces: [
        {
          zIndex: 10,
          zooms: [2, 15],
          adcode: '350000',
          depth: 2
        },
        {
          zIndex: 10,
          zooms: [2, 15],
          adcode: '330800',
          depth: 2
        },
        {
          zIndex: 10,
          zooms: [2, 15],
          adcode: '310113',
          depth: 2
        }
      ]
    };
  },
  mounted() {
 setTimeout(()=>{
	     this.initMap();
 },1000)
  

  },
  beforeDestroy() {
    // 组件销毁前释放地图资源
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  },
  methods: {
    initMap() {
      
      this.map = new AMap.Map('container', {
        zoom: 5,
        center: [this.longitude, this.latitude]
      });
        this.setChinaBounds();
      // 添加行政区划图层
      this.provinces.forEach(province => {
        this.createProvinceLayer(province);
      });
    },
    
    setChinaBounds() {
	      // 创建行政区域查询对象
		AMap.plugin('AMap.DistrictSearch',function(){
			  const districtSearch = new AMap.DistrictSearch({
	        subdistrict: 0, // 不显示下级行政区
	        extensions: 'all'
	      });
		     console.log("断点2",districtSearch);
	      // 查询中国行政区边界
	      districtSearch.search('中国',async (status, result) => {
		  console.log("222",result);
	        if (status === 'complete' && result.info === 'OK') {
	          const bounds =await result.districtList[0].boundaries;
			
	          if (bounds) {
	            // 设置地图显示范围
	            this.map.setLimitBounds(bounds);
	            
	            // 可选：添加中国边界遮罩层，使外部区域变暗
	            this.addChinaMask(bounds);
	          }
	        }
	      });	
			
		})
	    
	   
	    },
		 addChinaMask(bounds) {
		      // 创建一个覆盖全球的灰色遮罩
		      const mask = new AMap.Polygon({
		        path: [
		          [-180, 90], [-180, -90], [180, -90], [180, 90]
		        ],
		        fillColor: '#000000',
		        fillOpacity: 0.7,
		        strokeWeight: 0,
		        zIndex: 1
		      });
		      
		      // 从遮罩中减去中国区域
		      mask.setHoles(bounds);
		      
		      // 添加到地图
		      this.map.add(mask);
		    },
			   createProvinceLayer(province) {
			      const districtLayer = new AMap.DistrictLayer.Province({
			        zIndex: province.zIndex,
			        zooms: province.zooms,
			        adcode: [province.adcode],
			        depth: province.depth,
			        styles: {
			          fill: '##aaffffe7',
			          'stroke-width': 2,
			          'stroke-color': '#3388ff'
			        }
			      });
			      
			      this.map.add(districtLayer);
			    }
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  
  .container {
    width: 100%;
    height: 100%;
  }
}
</style>